<template>
  <div class="container">
    <div class="top-header flex-center">
      <div class="b-total flex-column">
        <text class="num"> ￥{{ toFixedNum(num) }} </text>
        <text class="tip">今日收益(元)</text>
      </div>
    </div>
    <div class="l-box flex-center">
      <view
        class="d-box flex-column"
        v-for="(item, i) in topData"
        :key="i"
        :class="{ line: i + 1 != topData.length }"
      >
        <text class="num">{{
          item.valueType == "money" ? "￥" + toFixedNum(item.value) : item.value
        }}</text>
        <text class="title">{{ item.title }}</text>
      </view>
    </div>

    <view class="list">
      <view class="filter flex-space-between">
        <view class="time-box" @click="timePicker = true">
          <text class="time">{{ query.mon }}</text>
          <text class="iconfont icon-down"></text>
          <u-picker
            mode="time"
            v-model="timePicker"
            :default-time="query.mon"
            :params="params"
            title="选择年月"
            @confirm="pickerConfirmHandle"
            start-year="2021"
            @cancel="timePicker = false"
            confirm-color="#4888FB"
          />
        </view>
        <policyFilter
          myKey="defalut"
          @confirm="confirm"
          :policyCode="query.policyCode"
        ></policyFilter>
        <!-- <view class="type">
          <u-tabs
            active-color="#4286F5"
            :list="echartNavType"
            :is-scroll="false"
            bg-color="transparent"
            :current="navIndex1"
            @change="changeNav"
          ></u-tabs>
        </view> -->
      </view>
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="time">
          {{ item.date | timeForm }}
        </view>
        <view class="data flex-column">
          <view
            class="tag-box flex-space-between"
            v-for="(itemS, indexS) in item.detail"
            :key="indexS"
          >
            <text class="title">{{ itemS.walletName }}</text>
            <text class="num">￥{{ toFixedNum(itemS.amount) }}</text>
          </view>
          <!-- <view class="tag-box flex-space-between">
            <text class="title">达标奖励</text>
            <text class="num">{{ toFixedNum(item.value) }}</text>
          </view>
          <view class="tag-box flex-space-between">
            <text class="title">通讯费奖</text>
            <text class="num">{{ toFixedNum(item.value) }}</text>
          </view>
          <view class="tag-box flex-space-between">
            <text class="title">激活返现</text>
            <text class="num">{{ toFixedNum(item.value) }}</text>
          </view> -->
        </view>
      </view>
    </view>
    <u-popup v-model="filterPopup" mode="top" :border-radius="20">
      <div class="filter-body">
        <!-- <view class="f-title">筛选条件</view> -->

        <div class="filter-content">
          <u-field
            label="代理商编号："
            :value="query.agentNo"
            :label-width="170"
            input-align="left"
            placeholder="请输入代理商编号"
          >
          </u-field>
          <!-- <u-field
            :disabled="true"
            label="品牌："
            :value="query.policyName"
            input-align="left"
            :label-width="170"
            placeholder="请选择"
            @click="showPicker = true"
          >
            <text class="iconfont icon-Downarrow-R iconfont-right" slot="right"></text>
          </u-field> -->
        </div>
        <div class="footer-btn">
          <div class="btn-left">
            <button class="reset" size="large" type="warn" @click="resetHandle">
              重置
            </button>
          </div>
          <div class="btn-right">
            <button class="myBtn" round size="large" @click="queryHandle">
              搜索
            </button>
          </div>
        </div>
      </div>
    </u-popup>
    <!-- <u-picker
      title="品牌"
      v-model="showPicker"
      mode="selector"
      :range="policyList"
      range-key="policyName"
      confirm-color="#4888FB"
      @confirm="onPolicyConfirm"
      @cancel="showPicker = false"
    /> -->
    <uni-load-more :status="loadMore"></uni-load-more>
  </div>
</template>

<script>
import {
  formDateToString,
  getCurrentMonthFirst1,
  getNowMonthNoDate,
} from "_c/utils/date";
import loadMoreData from "@/mixins/loadmore";
import { incomeDaysDetail } from "_a/earnings";
import { homeData } from "_a/home";

export default {
  mixins: [loadMoreData],
  data() {
    return {
      num: 0,
      topData: [
        {
          title: "本月收益(元)",
          value: 0,
          valueType: "money",
          key: "monIncome",
        },
        {
          title: "上月收益(元)",
          value: 0,
          valueType: "money",
          key: "lastMonIncome",
        },
      ],
      query: {
        mon: getNowMonthNoDate(new Date()),
      },
      params: {
        year: true,
        month: true,
        day: false,
        hour: false,
        minute: false,
        second: false,
      },
      timePicker: false,
      filterPopup: false,
      showPicker: false,
      policyList: [
        {
          policyName: "独守空房",
          policyCode: "dsaf",
        },
        {
          policyName: "独守空房",
          policyCode: "dsaf",
        },
        {
          policyName: "独守空房",
          policyCode: "dsaf",
        },
      ],
      list: [],
      echartNavType: [
        { name: "日", value: "0" },
        { name: "月", value: "1" },
      ],
      navIndex1: 0,
    };
  },
  onLoad(o) {
    this.init();
  },
  // 下拉刷新
  async onPullDownRefresh() {
	await this.init();
  	uni.stopPullDownRefresh();
  	this.$tip.toast('刷新成功!', 'success', 500);
  },
  filters: {
    timeForm(v) {
      return v.slice(5, 10);
    },
  },
  methods: {
    async getData() {
      homeData().then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.topData = this.formData(this.topData, data);
          this.num = data.todayIncome;
        }
      });
    },
    // 格式化请求赋值参数
    formData(list, data) {
      list = list.map((subItem) => {
        subItem.value = data[subItem.key];
        return subItem;
      });
      return list;
    },
    confirm(code) {
      this.query.policyCode = code;
      this.init();
    },
    changeNav(i) {
      console.log(i);
      this.navIndex1 = i;
      this.init();
    },
    onpolicyConfirm(e) {
      // console.log(e);
      this.query.policyCode = this.policyList[e[0]].policyCode;
      this.query.policyName = this.policyList[e[0]].policyName;
    },
    init() {
      this.$nextTick(() => {
        this.list = [];
        this.getList();
        this.getData();
        // this.refreshLoad();
      });
    },
    resetHandle() {
      this.typename = "全部";
      this.query = {
        pageNum: 1,
        pageSize: 20,
      };
    },
    queryHandle() {
      this.$forceUpdate();
      this.init();
      this.filterPopup = false;
    },
    pickerConfirmHandle(item) {
      console.log(item);
      this.query.mon = item.year + "-" + item.month;
      this.timePicker = false;
      this.init();
    },
    changeEChartType() {
      this.filterPopup = true;
    },
    getList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.query,
      };
      incomeDaysDetail(params).then((res) => {
        var list = res.data;
        this.loadMoreStatusDeal(list);
        if (list.length > 0) {
          this.list = this.list.concat(list);
        }
      });
    },
    // reachBottomCallBack() {
    //   this.getList();
    // },
  },
};
</script>
<style scoped lang='scss'>
.container {
  padding: R(0) 0 R(25);
}
.top-header {
  background: $box-linear-bg;
  padding: R(20px) 0;
  display: flex;
  align-items: center;
  position: relative;
  height: R(200px);
  color: #fff;
  position: relative;
  .b-total {
    text-align: center;
    .num {
      font-size: R(34px);
      font-weight: 600;
      margin-bottom: R(10);
    }
    .tip {
      font-size: R(26px);
      font-weight: 400;
      color: #eff4fe;
    }
  }
  .withdraw {
    position: absolute;
    right: R(30);
    top: R(80);
    width: R(147);
    height: R(68);
    line-height: R(68);
    text-align: center;
    background: rgba(255, 255, 255, 0.14);
    border-radius: R(30);
  }
}
.l-box {
  margin-bottom: R(26);
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.94);
  margin: R(-50) R(25) R(20);
  border-radius: R(10);
  height: R(161);
  color: #808080;
  text-align: center;
  position: relative;
  z-index: 1;
  .d-box {
    width: 50%;
    text-align: center;
  }
  .num {
    font-size: R(34px);
    font-weight: bold;
    margin-bottom: R(20);
    color: #1a1a1a;
  }
  .title {
    font-size: R(26px);
    font-weight: 400;
    margin-top: auto;
    white-space: nowrap;
  }
  .sub {
    @extend .title;
    height: R(30);
  }
  .line {
    position: relative;
  }
  .line::after {
    content: "";
    position: absolute;
    background: #eee;
    width: 1px;
    height: R(94);
    right: 0;
    top: R(8);
  }
}
.list {
  background: #fff;
  border-radius: R(10);
  padding: R(20px) R(25);
  margin: R(0) R(25) R(20);

  .filter {
    // padding: R(20);
    font-size: R(24px);
    font-weight: 400;
    color: #666666;
    margin-bottom: R(20);
    .type {
      width: R(160);
    }
    .time-box {
      font-size: R(26);
    }
    .icon-xiajiantou {
      font-size: R(24);
      margin-left: R(14);
    }
  }
}

.item {
  margin: R(0) R(0) R(28);
  .time {
    display: inline-block;
    width: R(114);
    height: R(44);
    line-height: R(44);
    margin-bottom: R(10);
    text-align: center;
    background: #f1f6f8;
    border-radius: R(22);
    font-size: R(26);
    font-weight: 400;
    color: #666666;
    background: #f1f6f8;
  }
  .money-total {
    padding: R(30) R(32);
    color: #1a1a1a;
  }
  .date {
    .data {
      .tag-box {
        text-align: center;
        padding: R(0) 0;
        .num {
          font-size: R(30);
          margin-bottom: R(10);
        }
        .title {
          font-size: R(24);
          color: #666666;
        }
      }
    }
    .name {
      font-size: R(26);
      margin-bottom: R(20);
      .me {
        position: relative;
        color: #f3e8a1;
        font-size: R(46);
        .font {
          position: absolute;
          left: R(20);
          top: R(10);
          font-size: R(20);
          color: #000;
        }
      }
    }
    .title {
      font-size: R(30);
      font-weight: bold;
      color: #1a1a1a;
    }
  }
}

.filter-body {
  padding: R(30);
  .f-title {
    font-size: R(30);
    text-align: center;
    font-weight: 400;
    color: #999;
  }
}
.filter-content {
  margin-bottom: R(30);
}

.filter-body .footer-btn {
  display: flex;
  /*position: absolute;*/
  bottom: 0;
  width: 100%;
}

.filter-body .footer-btn .btn-left {
  width: 30%;
  margin-left: 15%;
}

.filter-body .footer-btn .btn-right {
  width: 30%;
  margin-left: 10%;
}

.filter-body .filter-tiem {
  margin-bottom: R(25);
}

.filter-body .filter-tiem .tit {
  font-size: R(32);
  color: #333;
}

.filter-body .filter-tiem .select-list .select-item {
  float: left;
  width: 33%;
  padding: R(20) R(10);
}
</style>